// 碳交易规模展示
import React, { Children, useEffect, useState } from 'react';
import { connect } from 'dva';
import * as echarts from 'echarts';
import './carbonTrade.less';
import { getTradeData } from '@/services/carbon'

const carbonTrade = (props) => {
  const [amountScale, setAmountScale] = useState({})
  const [volumeScale, setVolumeScale] = useState({})
  const [seriesAmount, setSeriesAmount] = useState([])
  const [seriesVolume, setSeriesVolume] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 获取接口数据并赋值
        const res = await getTradeData()
        if (res.code === 200) {
          setAmountScale(res.data.amountScale)
          setVolumeScale(res.data.volumeScale)
          setSeriesAmount(res.data.seriesAmount)
          setSeriesVolume(res.data.seriesVolume)
        }
      } catch (error) {
        console.error(error);
      }
    };
    fetchData()
  }, [])

  useEffect(() => {
    // 判断图表数据是否存在，存在则进行图表的渲染
    if (seriesVolume.length === 0) {
      return
    }
    let tradeCenterChart = echarts.init(document.getElementById("tradeCenterChart"));
    let volumeSeries = []
    let volumeXdata = []
    // 处理数据
    seriesVolume.forEach((item, index) => {
      volumeSeries.push({
        name: item.name,
        type: 'line',
        yAxisIndex: index,
        data: item.data,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: index === 0 ? '#25B6B6' : '#5178FF'
        },
        lineStyle: {
          color: index === 0 ? '#25B6B6' : '#5178FF'
        }
      })
      volumeXdata = {
        data: item.xAxis
      }
    })
    // 绘制图表
    tradeCenterChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = '万吨CO2'
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          type: 'line',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: volumeXdata,
      yAxis: [
        {
          type: 'value',
          name: '单位：万吨CO2',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
        {
          type: 'value',
          name: '单位：万吨CO2',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          show: false,
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
      ],
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: -10,  // 调整图表左边距
        right: 0,  // 调整图表右边距
        top: 30,  // 调整图表上边距
        bottom: 0,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: volumeSeries
    });
    window.onresize = function () {
      // 自适应大小
      tradeCenterChart.resize();
    };
  }, [seriesVolume])

  useEffect(() => {
    // 判断图表数据是否存在，存在则进行图表的渲染
    if (seriesAmount.length === 0) {
      return
    }
    let tradeBottomChart = echarts.init(document.getElementById("tradeBottomChart"));
    let amountSeries = []
    let amountXdata = []
    seriesAmount.forEach((item, index) => {
      amountSeries.push({
        name: item.name,
        type: 'bar',
        yAxisIndex: index,
        data: item.data,
        itemStyle: {
          color: index === 0 ? '#25B6B6' : '#5178FF'
        }
      })
      amountXdata = {
        data: item.xAxis
      }
    })
    tradeBottomChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = '万元'
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          type: 'none',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: amountXdata,
      yAxis: [
        {
          type: 'value',
          name: '单位：万元',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
        {
          name: '单位：万元',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          show: false,
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
      ],
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: -40,  // 调整图表左边距
        right: 0,  // 调整图表右边距
        top: 30,  // 调整图表上边距
        bottom: 0,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: amountSeries
    });
    window.onresize = function () {
      // 自适应大小
      tradeBottomChart.resize();
    };
  }, [seriesAmount])

  return (
    <div className="trade-content">
      <div className="top-box">
        <div className="left-box">
          <div className="count-box">
            <div className="title">全国碳交易量</div>
            <div className="counts-box">
              <span className="count">{volumeScale.value}</span>
              <span className="unit">万吨co2</span>
            </div>
            <div className="percent-box">
              <span className="left">同比</span>
              <span className="right" style={{ color: volumeScale.rate > 0 ? '#D81E06' : '#70B603' }}>{volumeScale.rate > 0 ? '+' : ''}{volumeScale.rate}%</span>
            </div>
          </div>
        </div>
        <div className="right-box">
          <div className="count-box">
            <div className="title">全国碳交易金额</div>
            <div className="counts-box">
              <span className="count">{amountScale.value}</span>
              <span className="unit">万元</span>
            </div>
            <div className="percent-box">
              <span className="left">同比</span>
              <span className="right" style={{ color: amountScale.rate > 0 ? '#D81E06' : '#70B603' }}>{amountScale.rate > 0 ? '+' : ''}{amountScale.rate}%</span>
            </div>
          </div>
        </div>
      </div>
      <div className="center-box">
        <div className="title">全国每月碳交易量趋势</div>
        <div id="tradeCenterChart"></div>
      </div>
      <div className="bottom-box">
        <div className="title">全国每月碳交易金额趋势</div>
        <div id="tradeBottomChart"></div>
      </div>
    </div>
  )
};

export default connect()(carbonTrade);
